혼자 공부하는 바이브 코딩 — 1장 나의 첫 바이브 코딩 딥다이브 학습 노트

출처: 혼자 공부하는 바이브 코딩 with 클로드 코드 (조태호) | 참고: https://github.com/taehojo/vibecoding

1장에서 다루는 내용

• 바이브 코딩이란 무엇인가 — AI와 대화하며 코드를 만드는 새로운 개발 방식
• AI 코딩 도구의 종류 — 웹 기반 챗봇, 모델 선택형, 전용 모델형
• 클로드 아티팩트로 웹페이지 만들기 — 계정 생성부터 게시까지
• 커스터마이즈로 개성 더하기 — AI가 만든 결과물을 대화로 수정

전체 흐름도

[바이브 코딩 이해]                [첫 실습: 웹페이지 만들기]
    |                                |
    v                                v
+------------------+     +---------------------------+
| 01-1             |     | 01-2                      |
| AI 어시스턴트 이해  |     | 클로드로 첫 웹페이지 제작   |
|                  |     |                           |
| 바이브 코딩 개념   |     | Step 1: 클로드 가입        |
| AI 도구 3가지 분류 |     | Step 2: 아티팩트 열기      |
| AI 발전 역사      |     | Step 3: 프롬프트 입력      |
+------------------+     | Step 4: 결과 확인+게시    |
                         | Step 5: 커스터마이즈       |
                         | Step 6: 기능 추가          |
                         +---------------------------+

선수 지식 체크리스트

• [ ] 웹 브라우저 사용법 (크롬, 엣지 등)
• [ ] 기본적인 인터넷 검색 능력
• [ ] 프로그래밍 경험 불필요 — 이 장이 출발점!

핵심 키워드

01-1 나의 코딩 파트너, AI 어시스턴트

한 줄 요약

바이브 코딩은 코드를 직접 쓰지 않고, AI와 대화하며 프로그램을 만드는 새로운 방식이다.

쉬운 설명 (요리 비유)

"요리를 전혀 할 줄 모르는 사람이, 요리사에게 '오늘 날씨가 좋으니까 시원한 파스타 만들어줘'라고 말하면 요리사가 알아서 만들어주는 것"

이것이 바이브 코딩이다: - 전통적 코딩: 레시피를 직접 읽고, 재료를 손질하고, 불 조절까지 모두 직접 - 바이브 코딩: "이런 음식 만들어줘"라고 말하면 AI 요리사가 만들어주고, 맛보고 수정 요청

AI 코딩 도구의 3가지 유형

┌─────────────────────────────────────────────────────────────────┐
│ 유형 1: 웹 기반 챗봇                                             │
│ 설치 없이 웹에서 바로 사용. 복사-붙여넣기 방식.                    │
│ 예: ChatGPT, 클로드 웹                                           │
│ 장점: 진입 장벽 제로                                              │
│ 단점: 코드를 직접 복사해서 개발 환경에 붙여야 함                   │
├─────────────────────────────────────────────────────────────────┤
│ 유형 2: 모델 선택형                                               │
│ 코드 편집기에 AI가 통합. 여러 LLM을 골라 사용 가능.                │
│ 예: 커서(Cursor), 리플릿(Replit), 윈드서프(Windsurf)              │
│ 장점: 렌터카처럼 원하는 모델을 골라 사용                           │
│ 단점: 렌터카 비용(도구) + 기름값(모델) 이중 부담                   │
├─────────────────────────────────────────────────────────────────┤
│ 유형 3: 전용 모델형 ← 이 책의 주인공!                             │
│ 특정 AI 모델을 직접 설치. 마치 자기 차를 소유하는 것.              │
│ 예: 클로드 코드(Claude Code), 제미나이 CLI                        │
│ 장점: 추가 비용 없음, 로컬 파일 직접 접근, 프로젝트 통합 관리      │
│ 단점: 초기 설정이 필요                                            │
└─────────────────────────────────────────────────────────────────┘

AI 어시스턴트의 발전 역사

뉴럴넷 → 딥러닝 → 트랜스포머 → LLM (현재)
  |          |          |           |
1940년대   2010년대   2017년      2020년대~
퍼셉트론   CNN, GAN   구글 논문    GPT, 클로드

핵심 체크포인트

• ✅ 바이브 코딩 = AI와 대화하며 코드를 만드는 새로운 방식
• ✅ 코딩 도구 3유형: 웹 기반 챗봇 / 모델 선택형 / 전용 모델형
• ✅ 이 책은 전용 모델형(클로드 코드) 중심으로 진행
• ✅ 프로그래밍 경험이 전혀 없어도 시작 가능

01-2 AI로 나만의 첫 웹페이지 만들기

한 줄 요약

클로드의 아티팩트 기능으로 코드 한 줄 없이 나만의 개인 시작 페이지를 만들고 게시한다.

쉬운 설명 (레고 비유)

"레고 블록을 하나하나 끼우는 대신, AI에게 '우주선 만들어줘'라고 말하면 AI가 레고를 조립해주고, 마음에 안 드는 부분은 '날개를 더 크게 해줘'라고 말하면 수정해주는 것"

실습 따라하기 — 개인 시작 페이지 만들기

Step 1: 클로드 가입하기

1. https://claude.ai 접속
2. [Google로 계속하기] 클릭 (권장)
3. 로그인 완료 → "환영합니다, 혼공바이브님" 화면 확인

Step 2: 아티팩트 열기

1. 왼쪽 사이드바에서 [아티팩트] 아이콘 클릭
2. [+ 새 아티팩트] 버튼 클릭
3. 카테고리 중 [앱 및 웹사이트] 선택
4. AI와 대화할 준비 완료!

Step 3: 프롬프트 입력하기

┌─────────────────────────────────────────────────┐
│ 프롬프트 (이것만 입력하면 됩니다!)               │
│                                                 │
│ "오늘의 날씨와 주요 뉴스를 보여 주는             │
│  나만의 시작 홈페이지를 만들고 싶어."            │
│                                                 │
│ → Enter 키를 누르면 클로드가 즉시 코드 생성!     │
└─────────────────────────────────────────────────┘

클로드의 응답: - HTML, CSS, 자바스크립트를 자동 생성 - 오른쪽 미리보기 창에서 실제 동작하는 페이지 확인 가능 - 시계, 날씨, 뉴스, 검색 기능이 모두 포함된 완성품!

Step 4: 더 구체적인 프롬프트로 개선

프롬프트:
"밝고 깔끔한 스타일을 선호해. 시계와 검색바도 추가해 줘.
 기술 관련 뉴스를 보여 줘."

→ 클로드가 요청을 이해하고 시작 페이지 제작 계획을 제시
→ "이 계획대로 시작해 줘." 라고 답하면 바로 제작 시작!

Step 5: 웹페이지 게시하고 공유하기

1. 아티팩트 상단의 [게시] 버튼 클릭
2. [게시 및 링크 복사] 버튼 클릭
3. 복사한 링크를 브라우저에 붙여넣기 → 완성!

⚠️ 주의: 게시하면 링크가 있는 모든 사용자가 볼 수 있음
         (비공개로 유지됨, 검색에는 노출 안 됨)

Step 6: 커스터마이즈로 개성 더하기

프롬프트 1: "구글 스타일로 디자인을 수정해 줘."
→ 클로드가 웹페이지의 CSS를 구글 Material Design 스타일로 변경

프롬프트 2: "오늘의 할 일 목록을 추가해 줘."
→ 투두 리스트 위젯이 추가됨

프롬프트 3: "[현재 시간], [오늘의 할 일], [오늘의 날씨], [최신 기술 뉴스]
             아이템을 한 열에 두 개씩 배치하고, 메모지 안에 각각 들어 있는
             디자인으로 수정해 줘."
→ 2열 그리드 레이아웃으로 변경

실습 결과물

완성된 개인 시작 페이지 구성:
┌────────────────┬────────────────┐
│   현재 시간     │  오늘의 할 일   │
│   12:19:57     │  □ 프로젝트 작성│
│   2025.8.21    │  □ 회의 참석    │
├────────────────┼────────────────┤
│  오늘의 날씨    │  최신 기술 뉴스 │
│   22°C 맑음    │  OpenAI GPT-5  │
│   습도 45%     │  삼성전자 GAA   │
└────────────────┴────────────────┘
       Google 검색 바

프롬프트의 중요성

❌ 나쁜 프롬프트: "홈페이지 만들어 줘"
   → 막연한 결과, AI가 마음대로 만듦

✅ 좋은 프롬프트: "서울 날씨와 기술 뉴스를 보여주는 시작 페이지"
   → 구체적이어서 원하는 결과에 가까움

✅✅ 더 좋은 프롬프트: "밝고 깔끔한 스타일을 선호해. 시계와 검색바도
   추가해 줘. 기술 관련 뉴스를 보여 줘."
   → 스타일 + 기능 + 콘텐츠까지 구체적으로 지정

클로드 유료 플랜 비교

3장 이후 실습에는 Pro 이상의 플랜이 필요합니다.

핵심 체크포인트

• ✅ 클로드 아티팩트 = 코드 생성 + 미리보기를 제공하는 작업 공간
• ✅ 프롬프트가 구체적일수록 AI의 결과물이 정확해진다
• ✅ 게시 기능으로 만든 웹페이지를 즉시 공유 가능
• ✅ 커스터마이즈로 AI 결과물을 반복적으로 개선 가능

연습문제 풀이

Q1: 바이브 코딩 도구의 유형 중 "모델 선택형"의 대표 도구는?

A: 커서(Cursor), 리플릿(Replit), 윈드서프(Windsurf) 등. 여러 언어 모델 중 특성에 맞는 하나를 골라 사용할 수 있는 방식이다.

Q2: 클로드에서 코드나 문서를 생성할 때 사용하는 특별한 작업 공간은?

A: 아티팩트(Artifacts). 대화창과 별도로 구분되는 패널로, 실제 작동하는 결과물을 즉시 확인할 수 있다.

Q3: 웹페이지를 만든 후 다른 사람과 공유하기 위해 클릭해야 하는 버튼은?

A: [게시] 버튼. 게시 후 링크를 복사하여 다른 사람에게 전달할 수 있다.

부록 A: 용어 사전

부록 B: 핵심 비교표

AI 코딩 도구 3유형 비교

부록 C: 추천 참고 자료 & 링크